<template>
	<view class="group" v-if="loadStatus">

		<view class="header  bg-theme text-sm flex justify-center">
			<view class="box flex  justify-center align-center text-center">
				<block v-for="(item, index) in typeList" :key="index">
					<view class="item" :class="typeIndex == index ? 'bg-black text-white': ''"
						@tap="onChangeType(index)">
						{{item.name}}
					</view>
				</block>
			</view>

		</view>

		<div class="container">


			<view class="cu-list menu" v-if="typeList[typeIndex].list.length > 0">
				<block v-for="(item, index) in typeList[typeIndex].list" :key="index">
					<view class="cu-item">
						<view>{{item.remark}}</view>
						<view class="flex align-center">
							<view class="cu-btn bg-theme line-yellow sm" @tap="onEdit(item)" v-if="typeIndex == 0">编辑</view>
							<view class="cu-btn bg-theme line-yellow sm" @tap="un_bind(index)">解绑</view>
						</view>

					</view>
				</block>
			</view>

			<u-empty text="没有成员" v-else></u-empty>


			<view class="btn-theme bg-theme add-btn" @tap="onShare">邀请新成员</view>

			<u-popup :show="showShare" @close="showShare = false" mode="center" :round="10"
				:safeAreaInsetBottom="false">
				<view class="share-popup">
					<view class="header bg-theme text-white flex align-center justify-center">{{edit? '编辑账户':'请选择要共享的账户'}}</view>
					<view class="remark">
						<u--input v-model="remark" placeholder="请输入备注名称"></u--input>
					</view>
					<view class="account">
						<u-checkbox-group v-model="account_ids" placement="column">
							<u-checkbox :customStyle="{marginBottom: '10px'}" @change="onAllChange" shape="circle"
								:size="24" label="全部" :name="0">
							</u-checkbox>
							<u-checkbox :checked="account_ids.indexOf(item.id) >= 0" :customStyle="{marginBottom: '10px'}" v-for="(item, index) in accounts"
								shape="circle" :size="24" :key="index" :label="item.name" :name="item.id"
								v-if="item.user_id == userInfo.id" :disabled="selet_all">
							</u-checkbox>
						</u-checkbox-group>
					</view>
					<button @tap="submitEdit" class="bg-theme text-white" v-if="edit">提交</button>
					<button open-type="share" class="bg-theme text-white" v-else>邀请</button>
				</view>
			</u-popup>

		</div>
	</view>
</template>

<script>
	import bindUserModel from '../../models/BindUserModel';
	import shareModel from '../../models/ShareModel';
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['userInfo', 'accounts'])
		},
		data() {
			return {
				loadStatus: false,
				typeIndex: 0,
				account_ids: [],
				remark: '',
				typeList: [{
						name: '我共享的',
						value: 1,
						list: [],
						status: false,
					},
					{
						name: '共享给我的',
						value: 2,
						list: [],
						status: false,
					},
				],
				showShare: false,
				share_id: '',
				selet_all: false,
				edit: false,
				edit_id: ''
			}
		},
		async onLoad(options) {
			uni.showLoading();

			await this.getList()
			this.loadStatus = true;
			uni.hideLoading();
		},
		async onShareAppMessage() {
			const res = await this.onConfirmShare()
			if (res) {
				this.showShare = false
				return {
					path: '/pages/my/bind?id=' + this.share_id,
					title: `你的好友邀请你共享账本了,本邀请10分钟内有效`,
					imageUrl: '/static/poster.png'
				}
			}

		},
		methods: {
			async getList() {
				var item = this.typeList[this.typeIndex];
				if (item.status) {
					return false;
				}

				const res = await bindUserModel.users(item.value)
				if (res.code == 200) {
					item.list = res.data;
					item.status = true;
				} else {
					this.$base.alert(res.msg, () => {
						uni.navigateBack();
					})
				}
			},
			onEdit(item) {
				const ids = item.account_ids.split(',')
				this.account_ids = []
				ids.forEach(item => {
					this.account_ids.push(parseInt(item))
				})
				
				this.remark = item.remark
				this.edit_id = item.id
				this.showShare = true
				this.edit = true
			},
			submitEdit() {
				if (!this.remark) {
					this.$base.msg('请输入备注名称')
					return false
				}
				
				
				if (this.account_ids.length == 0) {
					this.$base.msg('请选择账户')
					return false
				}
				
				let account_ids = this.account_ids
				if (this.account_ids.indexOf(0) != -1) {
					account_ids = [0]
				}
				bindUserModel.edit({
					id: this.edit_id,
					account_ids: account_ids,
					remark: this.remark
				}).then(res => {
					this.$base.alert(res.msg, () => {
						if(res.code == 200) {
							this.share_id = ''
							this.remark = ''
							this.edit_id = ''
							this.account_ids = []
							this.edit = false
							this.showShare = false;
							this.typeList[this.typeIndex].status = false;
							this.getList()
						}
					})
					
				})
				return true
			},
			un_bind(index) {
				uni.showModal({
					title: '提示',
					content: '确定解绑该用户吗？',
					success: e => {
						if (e.confirm) {
							let row = this.typeList[this.typeIndex]
							var item = row.list[index];
							uni.showLoading({
								mask: true
							})

							bindUserModel.unbind({
								id: item.id,
								type: row.value,
								user_id: item.user_id
							}).then(res => {
								uni.hideLoading();
								this.$base.msg()
								if (res.code == 200) {
									this.typeList[this.typeIndex].list.splice(index, 1);
								}
							})
						}
					}
				})
			},
			onShare() {
				if (this.share_id) {
					this.showShare = true
					return
				}
				this.edit = false
				uni.showLoading({
					mask: true
				})
				shareModel.add().then(res => {
					this.share_id = res.data
					this.showShare = true
					uni.hideLoading()
				})
			},
			onAllChange(e) {
				this.selet_all = e
			},
			onChangeType(index) {
				this.typeIndex = index
				this.getList()
			},
			onConfirmShare() {
				if (!this.remark) {
					this.$base.msg('请输入备注名称')
					return false
				}


				if (this.account_ids.length == 0) {
					this.$base.msg('请选择账户')
					return false
				}
				let account_ids = this.account_ids
				if (this.account_ids.indexOf(0) != -1) {
					account_ids = [0]
				}
				shareModel.edit({
					id: this.share_id,
					account_ids: account_ids,
					remark: this.remark
				}).then(res => {
					console.log('res', res)
					this.share_id = ''
					this.remark = ''
				})
				return true
			}
		}
	}
</script>

<style scoped lang="scss">
	.group {

		.header {
			height: 80upx;

			.box {

				width: 500upx;
				overflow: hidden;
				box-sizing: border-box;
				margin-bottom: 10rpx;

				.item {
					flex: 1;
					height: 60upx;
					display: flex;
					box-sizing: border-box;
					align-items: center;
					justify-content: center;
					border: 1rpx solid #000;
					border-radius: 0 10rpx 10rpx 0;

					&:nth-child(1) {
						border-radius: 10rpx 0 0 10rpx;
					}
				}
			}
		}


		.container {
			padding: 20rpx;
		}

		.cu-list {
			.cu-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx;
				border-bottom: 1rpx solid #eee;

				.cu-btn {
					font-size: 24rpx;
					padding: 10rpx 20rpx;
					border-radius: 10rpx;
					color: #fff;
					margin-left: 10rpx;
				}
			}
		}

		.add-btn {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			color: #fff;
			margin-top: 40rpx;
		}

		.share-popup {
			width: 80vw;
			height: 100%;

			.header {
				border-radius: 10rpx 10rpx 0 0;
				padding: 10rpx;
			}

			.remark {
				padding: 20rpx;
			}

			.account {
				height: 40vh;
				padding: 0 20rpx;
				margin: 20rpx 0;
				overflow-y: scroll;
			}
		}
	}
</style>